<template>
<div>
    <Button @click="changetype(1)">新闻</Button>
    <Button @click="changetype(2)">服务</Button>
    <Button @click="changetype(3)">相册</Button>
    <Button @click="changetype(4)">活动</Button>


    <Tree :data="data" @on-select-change="onselectchange"></Tree>





    <Button type="primary" @click="modal1 = true">添加</Button>
    <Button type="success" @click="modal2 = true">修改</Button>
    <Button type="error" @click="modal3 = true">删除</Button>
    <Modal
        v-model="modal1"
        title="添加标题内容"
        @on-ok="tjok">

    <Form :model="formValue" label-position="left" :label-width="100">
            <FormItem label="Type">
                <Input v-model="formValue.type"></Input>
            </FormItem>
            <FormItem label="Title">
                <Input v-model="moudelname"></Input>
            </FormItem>
            <FormItem label="ParentId">
                <Input v-model="formValue._id"></Input>
            </FormItem>
    </Form>
    </Modal>


    <Modal
        v-model="modal2"
        title="修改标题内容"
        @on-ok="xgok">

    <Form :model="formValue" label-position="left" :label-width="100">
            <FormItem label="Type">
                <Input v-model="formValue.type"></Input>
            </FormItem>
            <FormItem label="Title">
                <Input v-model="formValue.title"></Input>
            </FormItem>
            <FormItem label="Id">
                <Input v-model="formValue._id"></Input>
            </FormItem>
    </Form>
    </Modal>



    <Modal
        v-model="modal3"
        title="删除标题内容"
        @on-ok="scok">

        <p>你确定删除此标题以及它的子标题？</p>

    </Modal>


</div>
</template>
<script>
export default {
  data() {
    return {
      data: null,
      type: 1,
      nodevalue: {},
      modal1: false,
      modal2: false,
      modal3: false,
      moudelname: "",
      ids: "",
      formValue: {
        type: "",
        title: "",
        _id: ""
      }
    };
  },
  methods: {
    changetype(type) {
      this.type = type;
      this.getdata();
    },
    getdata() {
      this.axios({
        url: "http://10.31.162.59:3000/cate/list/" + this.type,
        method: "post"
      }).then(res => {
        this.data = res.data;
      });
    },
    onselectchange(node) {
      this.nodevalue = node[0];
      this.formValue.type = this.nodevalue.type;
      this.formValue.title = this.nodevalue.title;
      this.formValue._id = this.nodevalue._id;
      console.log(this.formValue.type);
      console.log(this.formValue._id);
    },
    tjok() {
      this.axios({
        url: "http://10.31.162.59:3000/cate",
        method: "post",
        data: {
          type: this.formValue.type,
          title: this.moudelname,
          parentId: this.formValue._id
        }
      }).then(res => {
        this.getdata();
        this.moudelname = "";
      });
    },

    xgok() {
      this.axios({
        url: "http://10.31.162.59:3000/cate/" + this.formValue._id,
        method: "put",
        data: {
          title: this.formValue.title
        }
      }).then(res => {
        this.getdata();
        this.formValue.title = "";
      });
    },

    scok() {
      this.delData(this.nodevalue);

      this.axios({
        url: "http://10.31.162.59:3000/cate",
        method: "delete",
        data: {
          ids: this.ids
        }
      }).then(v => {
        console.log(v.data);
        this.getdata();
      });
      this.ids = "";
    },
    delData(datas) {
      for (var data in datas) {
        if (data == "_id") {
          this.ids += datas[data] + ",";
        }
        if (data == "children") {
          for (var d in datas[data]) {
            this.delData(datas[data][d]);
          }
        }
      }
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>
